<template>
  <div id="collection">
    <div class="head">
      <div>
        <p class="p1">1.账号信息&nbsp;&nbsp;</p>
        <p class="p1">&nbsp;&nbsp;————&nbsp;&nbsp;2.企业信息&nbsp;&nbsp;</p>
        <p class="p1">————&nbsp;&nbsp;3.收款信息</p>
      </div>
    </div>

    <!--  -->
    <div class="content">
      <el-form :model="bank" :rules="add" ref="enterprise">
        <el-form-item label="银行开户账号" prop="user">
          <el-input v-model="bank.user" />
        </el-form-item>
      </el-form>

      <el-form :model="bank" :rules="add" ref="enterprise">
        <el-form-item label="开户银行所在地" prop="location">
          <el-input v-model="bank.location" />
        </el-form-item>
      </el-form>

      <el-form :model="bank" :rules="add" ref="enterprise">
        <el-form-item label="开户银行" prop="postal">
          <el-input v-model="bank.postal" />
        </el-form-item>
      </el-form>

      <el-button type="info" plain @click="btn">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "collection",
  data() {
    // 验证银行卡号
    let judge = (rule, value, cb) => {
      // 验证企业名称
      const regEmail =
        /^(621096|621098|622150|622151|622181|622188|622199|955100|621095|620062|621285|621798|621799|621797|620529|621622|621599|621674|623218|623219)\d{13}$/g;
      if (!regEmail.test(value)) {
        return cb();
      }
      cb(new Error("请输入正确的银行账号"));
    };
    return {
      bank: {
        user: "621799673002181048", //银行账号
        location: "四川成都", //开户银行所在地
        postal: "邮政", //开户银行
        address: "", //地址
      },
      imgFile: "",
      add: {
        account: [],
        location: [
          {
            required: true,
            message: "请输入您银行得开户银行所在地",
            trigger: "blur",
          },
        ],
        postal: [
          {
            required: true,
            message: "请输入您银行开户银行",
            trigger: "blur",
          },
        ],
        user: [
          {
            required: true,
            message: "请输入银行账号",
            trigger: "blur",
          },
          {
            validator: judge,
            message: "请输入正确的银行账号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    btn() {
      if (
        this.bank.user === "" ||
        this.bank.location === "" ||
        this.bank.postal === ""
      ) {
        this.$message({
          message: "请输入完整的信息后再点击提交",
          type: "warning",
        });
      } else {
        this.address = this.$route.query.value + this.$route.query.address;
        let data = JSON.parse(localStorage.getItem("data")); //取存进去的账号密码
        this.$axios({
          url: "http://172.16.113.187:8080/userSettle/subEnterpriseAndCollection",
          method: "post",
          data: {
            postbox: data.email, //账号
            name: this.$route.query.name, //企业名称
            location: this.address, //地址
            des: this.$route.query.Introduction, // 企业简介
            serviceNumber: this.$route.query.service, // 客户电话
            license: this.$route.query.Pictureaddress, // 营业执照
            photo: this.$route.query.Pictureaddress1, // 门头照片
            boss: this.$route.query.charge, // 负责人姓名
            bossNumber: this.$route.query.tel, // 负责人电话
            bankAccount: this.bank.user, // 银行账号
            bankLocation: this.bank.location, // 开户所在地
            bank: this.bank.postal, //开户银行
          },
        })
          .then((res) => {
            console.log("添加的结果", res);
            if (res.code === 200) {
              this.$router.push("/home/merchants/audit");
            }
            if (res.code === 50018) {
              this.$message({
                message: "该企业名称已经绑定过了",
                type: "warning",
              });
            }
          })
          .catch((err) => {
            console.log("添加失败", err);
          });
      }
    },
  },
};
</script>

<style scoped lang="less">
html,
body,
#app {
  width: 100%;
  height: 70%;
}

.head {
  margin-top: 50px;
  height: 30px;
  text-align: center;
  div:nth-of-type(1) {
    width: 34%;
    height: 30px;
    margin: auto;
  }
  p {
    float: left;
    line-height: 30px;
  }
  .el-form-item__label {
    width: 300px;
  }
}
.content {
  margin: auto;
  margin-top: 100px;
  width: 40%;
  height: 50%;
  // border: 1px solid red;
  text-align: center;
}
.el-input {
  width: 300px;
  float: right;
}
.el-form {
  margin-bottom: 20px;
}
/deep/.el-form-item__error {
  left: 195px;
}
.el-select {
  margin-left: -53px;
}
.el-textarea {
  left: 10px;
  width: 300px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-icon-plus {
  border: 1px solid #333;
  margin-left: -175px;
  width: 100px;
  height: 100px;
}
.avatar-uploader-icon[data-v-0be000a0] {
  line-height: 100px;
}
.avatar[data-v-0be000a0] {
  margin-left: -140px;
  width: 100px;
  height: 100px;
}
.p1{
  color: #c280ff;
}
</style>